<template>
  <div>
    <div v-if="props.printHtml" id="print_div" style="width: 80mm; margin: 0 auto">
      <div style="margin: 0 auto; padding: 0 0 20mm">
        <p style="text-align: center; font-size: 16px; margin-bottom: 10px">
          {{ props.printHtml.title }}
        </p>
        <p
          v-for="(item, key) in props.printHtml.headTable"
          :key="key"
          style="font-size: 12px; margin-top: 5px"
        >
          <span>{{ `${item.name}：` }}</span>
          <span style="margin-left: 5px">{{ item.value }}</span>
        </p>
        <table
          cellpadding="10"
          class="print-table"
          style="
            width: 100%;
            text-align: center;
            font-size: 12px;
            border-collapse: collapse;
            margin-top: 10px;
            border-top: 1px solid #666;
            border-left: 1px solid #666;
          "
        >
          <tbody>
            <tr v-for="(item, key) in props.printHtml.table" :key="key">
              <td
                :colspan="item.name2 ? 1 : 2"
                :style="{
                  width: `${item.name2 ? '80' : '60'}px`,
                  padding: '4px',
                  'white-space': 'nowrap',
                  'border-right': '1px solid #666',
                  'border-bottom': '1px solid #666',
                }"
              >
                {{ item.name }}
              </td>
              <td
                class="value"
                :colspan="item.name2 ? 1 : 2"
                style="
                  min-width: 60px;
                  padding: 4px;
                  word-break: break-all;
                  border-right: 1px solid #666;
                  border-bottom: 1px solid #666;
                "
              >
                {{ item.value }}
              </td>
              <td
                v-if="item.name2"
                style="
                  width: 80px;
                  padding: 4px;
                  border-right: 1px solid #666;
                  border-bottom: 1px solid #666;
                "
              >
                {{ item.name2 }}
              </td>
              <td
                v-if="item.name2"
                class="value"
                style="
                  min-width: 60px;
                  padding: 4px;
                  word-break: break-all;
                  border-right: 1px solid #666;
                  border-bottom: 1px solid #666;
                "
              >
                {{ item.value2 }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  interface Props {
    show?: boolean;
    printHtml: any;
    printData?: any;
    waiting?: boolean;
    printTaskID?: string | null;
    existTaskID?: string | null;
    printID?: string | null;
    num?: number | null;
    time?: string | null;
  }
  const props = withDefaults(defineProps<Props>(), {
    printHtml: () => {},
  });

  // const setEnTime = (date: any) => {
  //   const dateList = date.split(" ");
  //   if (dateList.length === 2) {
  //     const ymdList = dateList[0].split("-");
  //     const hmsList = dateList[1].split(":");
  //     if (ymdList.length === 3 && hmsList.length === 3) {
  //       return `${dateList[1]} ${ymdList[1]}/${ymdList[2]}/${ymdList[0]}`;
  //     }
  //   }
  //   return date;
  // }
</script>
